<!--
  Copyright (c) 2018-2999 广州市蓝海创新科技有限公司 All rights reserved.

  https://www.mall4j.com/

  未经允许，不可做商业用途！

  版权所有，侵权必究！
-->

<template>
  <div class="Mall4j page-member-center">
    <!-- 头部 -->
    <MemberHeader
      :member-infor="memberInfo"
    />
    <!-- /头部 -->
    <div class="member-banner">
      <div class="banner-box">
        <div class="login-box">
          <div class="head-portrait">
            <img
              v-if="userPic"
              :src="checkFileUrl(userPic)"
              alt
              @error="userPic=''"
            >
            <img
              v-if="!userPic"
              src="@/assets/images/buyer-img.png"
              alt
            >
          </div>
          <!-- 登录后显示 -->
          <div class="user-name">
            <span>{{ $t('memberCenter.hiDear') }}{{ memberInfo.nickName }}</span>
          </div>

          <!-- 已登录未购买 -->
          <router-link
            to="/member-center/buy-member"
            class="btn"
          >
            {{
              memberInfo.levelType === 0 ? $t('memberCenter.purchaseMembership') : $t('memberCenter.membershipRenewal')
            }}
          </router-link>
          <!-- 已登录已购买 -->
          <div class="growth-box">
            <div class="text">
              {{ $t('memberCenter.growthValue') }}：
            </div>
            <div class="growth">
              <span
                v-if="memberInfo.nextGrowth"
                class="percent"
                :style="{
                  width: (memberInfo.growth / memberInfo.nextGrowth) * 100 + '%'
                }"
              />
              <span
                v-if="!memberInfo.nextGrowth"
                class="percent"
                style="width:100%;"
              />
              <span
                v-if="memberInfo.nextGrowth && memberInfo.growth < memberInfo.nextGrowth"
                class="number"
              >{{ memberInfo.growth }}/{{ memberInfo.nextGrowth }}</span>
              <span
                v-else-if="!memberInfo.nextGrowth"
                class="number"
              >{{ $t('memberCenter.memberFull') }}</span>
              <span
                v-else
                class="number"
              >{{ memberInfo.growth }} {{ $t('memberCenter.upgradeable') }}</span>
            </div>
            <div class="rank">
              {{ memberInfo.levelName }}
            </div>
          </div>
          <div class="shortcut">
            <router-link
              to="/member-center/integral-mall"
              class="item"
            >
              <span class="icon">
                <img
                  src="@/assets/images/member-pic/integral-mall-icon.png"
                  alt
                >
              </span>
              <span class="text">{{ $t('memberCenter.pointsMall') }}</span>
            </router-link>
            <router-link
              to="/member-center/buy-member"
              class="item"
            >
              <span class="icon">
                <img
                  src="@/assets/images/member-pic/buy-member-icon.png"
                  alt
                >
              </span>
              <span class="text">{{ $t('memberCenter.purchaseMembership') }}</span>
            </router-link>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <!-- 会员权益 -->
      <div class="member-equity">
        <div class="member-tit">
          <div class="text">
            {{ $t('memberCenter.memberBenefits') }}
          </div>
          <router-link
            to="/member-center/member-equity"
            class="more"
          >
            {{ $t('memberCenter.moreBenefits') }}
            <span class="arr">></span>
          </router-link>
        </div>
        <div class="con">
          <div class="item">
            <div class="icon">
              <img
                src="@/assets/images/member-pic/equity-icon01.png"
                alt
              >
            </div>
            <div class="text-box">
              <div class="text">
                {{ $t('memberCenter.productShipping') }}
              </div>
              <div class="des">
                {{ $t('memberCenter.goodsFree') }}
              </div>
            </div>
          </div>
          <div class="item">
            <div class="icon">
              <img
                src="@/assets/images/member-pic/equity-icon02.png"
                alt
              >
            </div>
            <div class="text-box">
              <div class="text">
                {{ $t('memberCenter.exclusiveCoupons') }}
              </div>
              <div class="des">
                {{ $t('memberCenter.exclusiveOffers') }}
              </div>
            </div>
          </div>
          <div class="item">
            <div class="icon">
              <img
                src="@/assets/images/member-pic/equity-icon03.png"
                alt
              >
            </div>
            <div class="text-box">
              <div class="text">
                {{ $t('memberCenter.shoppingPoints') }}
              </div>
              <div class="des">
                {{ $t('memberCenter.membershipMore') }}
              </div>
            </div>
          </div>
          <div class="item">
            <div class="icon">
              <img
                src="@/assets/images/member-pic/equity-icon04.png"
                alt
              >
            </div>
            <div class="text-box">
              <div class="text">
                {{ $t('memberCenter.memberDiscount') }}
              </div>
              <div class="des">
                {{ $t('memberCenter.membersEnjoy') }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /会员权益 -->
      <!-- 签到&任务 -->
      <div class="sign-mission">
        <div class="tit-box">
          <div class="member-tit">
            <div class="text">
              {{ $t('memberCenter.dailySign') }}
            </div>
          </div>
          <div class="member-tit mission-tit">
            <div class="text">
              {{ $t('memberCenter.pointsTask') }}
            </div>
          </div>
        </div>
        <div class="con">
          <div class="sign">
            <div
              v-for="(item, index) in memberScore.scoreList"
              :key="index"
              class="item"
              @click="getPoints(index)"
            >
              <!-- 标准 -->
              <div
                v-if="signInItem < index + 1 && 7 > memberScore.signInCount"
                class="number"
              >
                +{{ item }}
              </div>
              <!-- 大于/等于7天 -->
              <div
                v-if="signInItem < index + 1 && 7 <= memberScore.signInCount"
                class="number"
              >
                +{{ memberScore.scoreList[6] }}
              </div>
              <!-- 可签 -->
              <div
                v-if="signInItem === index + 1 && memberScore.isSignIn === 0"
                class="number active"
              >
                {{ $t('memberCenter.signIn') }}
              </div>
              <!-- 已签 -->
              <div
                v-if="(signInItem >= index + 1 && memberScore.isSignIn === 1)
                  || (signInItem > index + 1 && memberScore.isSignIn === 0)"
                class="number active"
              >
                {{ $t('memberCenter.signed') }}
              </div>
              <div
                v-if="memberScore.signInCount < 7 && signInItem !== index + 1"
                class="text"
              >
                第{{ index + 1 }}天
              </div>
              <div
                v-if="signInItem === index + 1"
                class="text"
              >
                今天
              </div>
              <div
                v-if="memberScore.signInCount >= 7 && signInItem !== index + 1"
                class="text"
              >
                第{{ index + 1 + (memberScore.signInCount - 7 + 1) }}天
              </div>
            </div>
          </div>
          <div class="mission">
            <div class="item">
              <div class="text-box">
                <div class="text">
                  {{ $t('memberCenter.shoppingMall') }}
                </div>
                <div class="des">
                  {{ $t('memberCenter.purchase1') }}{{ memberScore.shopScore }}{{ $t('memberCenter.purchase2') }}
                </div>
              </div>
              <router-link
                to="/"
                class="btn"
              >
                {{ $t('memberCenter.goShopping') }}
              </router-link>
            </div>
            <div class="item">
              <div class="text-box">
                <div class="text">
                  {{ $t('memberCenter.registerNewUser') }}
                </div>
                <div class="des">
                  {{ $t('memberCenter.newPoints1') }}{{ memberScore.registerScore }}{{ $t('memberCenter.newPoints2') }}
                </div>
              </div>
              <a
                href="javascript:void(0)"
                class="btn default"
              >{{ $t('memberCenter.completed') }}</a>
            </div>
          </div>
        </div>
      </div>
      <!-- /签到&任务 -->
      <!-- 兑换列表 -->
      <div
        v-if="scoreList.length"
        class="exchange-list"
      >
        <div class="member-tit">
          <div class="text">
            {{ $t('memberCenter.exchangeGoods') }}
          </div>
          <router-link
            to="/member-center/integral-mall"
            class="more"
          >
            {{ $t('memberCenter.viewMore') }}
            <span class="arr">></span>
          </router-link>
        </div>
        <div class="goods-list integral-list">
          <div class="list-con">
            <div
              v-for="item in scoreList"
              :key="item.prodId"
              class="item"
              @click="toScoreProdDet(item.prodId,item.scorePrice)"
            >
              <div class="goods-img">
                <ImgShow :src="item.pic" />
              </div>
              <div class="goods-msg">
                <div class="goods-name">
                  {{ item.prodName }}
                </div>
                <div class="goods-price">
                  <div class="icon">
                    <img
                      src="@/assets/images/member-pic/integral-icon.png"
                      alt
                    >
                  </div>
                  <div class="integral-price">
                    {{ item.scorePrice }} {{ $t('memberCenter.points') }}
                  </div>
                  <div
                    v-if="item.price > 0"
                    class="add"
                  >
                    +
                  </div>
                  <div
                    v-if="item.price > 0"
                    class="price"
                  >
                    ￥{{ item.price }}
                  </div>
                </div>
                <div class="old-price">
                  {{ $t('memberCenter.marketPrice') }}￥{{ item.oriPrice }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /兑换列表 -->
    </div>
  </div>
</template>

<script setup>
import MemberHeader from '@/components/member-header/index.vue'
import { loadTransition } from '@/utils/load-transition'
import { ElMessage } from 'element-plus'
import Cookie from 'vue-cookies'
import { checkFileUrl } from '@/utils/index.js'
loadTransition() // 过渡效果
const userPic = ref('') // 会员头像
const router = useRouter()
const memberInfo = ref({}) // 会员信息
const scoreList = ref([]) // 积分商品列表

onMounted(() => {
  // 未登录跳转到登录页
  if (!Cookie.get('bbcToken')) {
    router.replace({ path: '/login' })
  }

  // 设置网页标题
  document.title = $t('memberCenter.memberCenter')

  // 获取会员信息
  http.get('/p/score/scoreLevel/page?levelType=' + 0).then(({ data }) => {
    getVipInternationalization(data)
    memberInfo.value = data
  })

  // 获取积分商品列表
  http.get('/search/page', {
    params: {
      current: 1,
      size: 20,
      prodType: 3,
      sort: 2
    }
  }).then(({ data }) => {
    scoreList.value = data.records[0].products
  })

  // 获取会员头像
  http.get('/p/user/userInfo').then(({ data }) => {
    userPic.value = data.pic
  })

  // 获取积分中心信息
  getMemberInfo()
})
const memberScore = ref({}) // 积分中心信息
const signInItem = ref(0)
// 获取积分中心信息
const getMemberInfo = () => {
  http.get('/p/score/scoreInfo').then(({ data }) => {
    // 领取积分签到第几个签到按钮，大于7天，一直为第七个签到按钮
    if (data.signInCount >= 7) {
      signInItem.value = 6
    } else {
      signInItem.value = data.signInCount
    }
    memberScore.value = data
  })
}

// 积分签到
const getPoints = (index) => {
  if (memberScore.value.isSignIn === 1 && signInItem.value === index + 1) {
    ElMessage({
      message: $t('memberCenter.signedTips1'),
      duration: 1000,
      type: String
    })
  } else if (memberScore.value.isSignIn === 0 && signInItem.value === index + 1) {
    http.get('/p/score/updateUserScore').then(({ data }) => {
      ElMessage({
        message: data,
        duration: 1000,
        type: String
      })
      getMemberInfo()
    })
  } else if (signInItem.value > index + 1) {
    ElMessage({
      message: $t('memberCenter.signedTips2'),
      duration: 1000,
      type: String
    })
  } else {
    ElMessage({
      message: $t('memberCenter.signedTips3'),
      duration: 1000,
      type: String
    })
  }
}

// 跳转到积分商品详情
const toScoreProdDet = (prodId, scoreFee) => {
  http.get('/search/page', {
    params: {
      current: 1,
      size: 20,
      prodType: 3,
      sort: 2
    }
  }).then(() => {
    const newPage = router.resolve({
      path: '/detail',
      query: {
        prodId,
        scoreFee
      }
    })
    window.open(newPage.href, '_blank', 'noopener,noreferrer')
  })
}
// 国际化
const getVipInternationalization = (data) => {
  if (!data?.userLevel) return
  const lang = Cookie.get('bbcLanguage') || 'zh_CN'
  let levelNameCn, levelNameEn
  if (!data.userLevel.userLevelLangList) return
  data.userLevel.userLevelLangList.forEach(val => {
    if (val.lang === 0) {
      levelNameCn = val.levelName
    }
    if (val.lang === 1) {
      levelNameEn = val.levelName
    }
  })
  data.levelName = lang === 'zh_CN' ? levelNameCn : levelNameEn || levelNameCn
}

</script>

<style lang="scss" scoped>
@use './index.scss';
</style>
